<template>
  <!-- 使用 v-bind和v-on来传递属性和方法-->
  <el-table v-bind="$attrs" v-on="$listeners">
    <el-table-column align="center" type="selection" width="55"></el-table-column>
    <el-table-column v-for="(item, index) in columns" :key="index" v-bind="item">
      <template v-if="item.items" v-slot="scope">
        <template v-for="btn in item.items">
          <el-button @click="handleRowAction($event, scope.row, btn.opt.action)" :type="btn.opt.type" :key="btn.id"> {{ btn.opt.text }}</el-button>
        </template>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: 'X2Table',
  props: {
    columns: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {}
  },
  methods: {
    handleRowAction(e, row, action) {
      this.$emit('handleRowAction', e, row, action)
    },
    // pageSize 改变时会触发
    // handleSizeChange(args) {
    //   this.$emit('size-change', args)
    // },
    // // currentPage 改变时会触发
    // handleCurrentChange(val) {
    //   this.$emit('page-change', val)
    // },
  },
}
</script>
